<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<div th:replace="common/common :: headblock('webssh0')"></div>
<!--  引入自定义CSS -->
<link rel="shortcut icon" href="/favicon.ico">
<link href="/jslib/xtermjs/xterm.css" rel="stylesheet">


<!--end Code Mirror -->

<style type="text/css">

</style>
</head>

<body class="skin-blue fixed layout-top-nav">
	<div class="wrapper">

		<header class="main-header">
			<nav class="navbar navbar-static-top">
				<div class="container">
					<div class="navbar-header">
						<a class="navbar-brand"><b>WebSSH</b></a>
					</div>

					<div class="collapse navbar-collapse pull-left"
						id="navbar-collapse">
						<form class="navbar-form navbar-right">
				            <div class="form-group">
				              <span><button type="button" class="btn btn-default">IP</button></span>
				              <input type="text" id="ipaddr" name="ipaddr" placeholder="IP地址" class="form-control" size="16">
				            </div>
				            <div class="form-group">
				              <span><button type="button" class="btn btn-default">端口</button></span>
				              <input type="text" id="port" name="port" placeholder="端口" class="form-control" size="6">
				            </div>
				            <div class="form-group">
                              <span><button type="button" class="btn btn-default">用户名</button></span>
                              <input type="text" id="username" name="username" placeholder="用户名" class="form-control" size="16">
                            </div>
                            <div class="form-group">
                              <span><button type="button" class="btn btn-default">密码</button></span>
                              <input type="password" id="password" name="password" placeholder="用户密码" class="form-control" size="16">
                            </div>
				            <button type="button" class="btn btn-success" id="connectbtn">连接</button>
				            <button type="button" class="btn btn-warning" id="disconnectbtn">断开</button>
				        </form>
					</div>

				</div>
			</nav>
		</header>
		
		<div class="content-wrapper">
		    <div id="terminal" style="width: 100%;height: 100%"></div>
		</div>
	</div>
	

	<!-- 引入通用javaScript -->
	<!-- jQuery 3 -->
	<script
		src="/jslib/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
	<!-- Bootstrap 3.3.7 -->
	<script
		src="/jslib/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<!-- AdminLTE App -->
	<script src="/jslib/adminlte/dist/js/adminlte.min.js"></script>
	<!--  引入自定义javaScript -->
	<script src="/jslib/xtermjs/xterm.js" charset="utf-8"></script>
	<!-- 自定义js -->
	<script src="/js/webssh/webssh.js" charset="utf-8"></script>

	<script th:inline="javascript">
		
		function connectFunction() {
			$("#terminal").empty();
			let ipaddr = $("#ipaddr").val();
			let port = $("#port").val();
			let username = $("#username").val();
			let password = $("#password").val();
			
	        $("#ipaddr").val("");
            $("#port").val("");
            $("#username").val("");
            $("#password").val("");
            
			openTerminal({operate:'connect',
				host: ipaddr,//IP
	            port: port,//端口号
	            username: username,//用户名
	            password: password //密码
	        });
		};
		
		function disconnectFunction() {
			$("#terminal").empty();
		};
		
		function init() {
			$("#connectbtn").on("click", function(){
				connectFunction();
			});
			$("#disconnectbtn").on("click", function(){
				disconnectFunction();
			});
		};
		$(function(){
			init();
		});
		
		/*
		 openTerminal( {
	        operate:'connect',
	        host: '101.132.190.132',//IP
	        port: '33689',//端口号
	        username: 'lenglingx',//用户名
	        password: 'hnjt123456'//密码
	    });
		*/
	    function openTerminal(options){
	        var client = new WSSHClient();
	        var term = new Terminal({
	            cols: 97,
	            rows: 27,
	            cursorBlink: true, // 光标闪烁
	            cursorStyle: "block", // 光标样式  null | 'block' | 'underline' | 'bar'
	            scrollback: 800, //回滚
	            tabStopWidth: 8, //制表宽度
	            screenKeys: true
	        });

	        term.on('data', function (data) {
	            //键盘输入时的回调函数
	            client.sendClientData(data);
	        });
	        term.open(document.getElementById('terminal'));
	        //在页面上显示连接中...
	        term.write('Connecting...');
	        //执行连接操作
	        client.connect({
	            onError: function (error) {
	                //连接失败回调
	                term.write('Error: ' + error + '\r\n');
	            },
	            onConnect: function () {
	                //连接成功回调
	                client.sendInitData(options);
	            },
	            onClose: function () {
	                //连接关闭回调
	                term.write("\rconnection closed");
	            },
	            onData: function (data) {
	                //收到数据时回调
	                term.write(data);
	            }
	        });
	    }
	</script>

</body>
</html>